import React, { Component } from 'react'
import { Card, Form, Icon, Input, Button, message } from 'antd'
import { reqUpdatePassword } from '../../../api'
import './repassword.less'
class Repassword extends Component {
    checkNewPassword = (rules, value, callback) => {
        let newPassword = this.props.form.getFieldValue('newPassword')
        if (value !== newPassword) {
            callback('两次新密码不一致')
        }
        callback();
    }

    handleSubmit = (event) => {
        event.preventDefault()
        this.props.form.validateFields((err, values) => {
            if(!err){
                reqUpdatePassword(values).then(res => {
                    if(res.code === 0){
                        message.success(res.msg)
                    }else{
                        message.error(res.msg)
                    }
                }).catch(error => {

                })
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Card title="修改密码" className="repassword">
                <Form onSubmit={this.handleSubmit} className="repassword-form">
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [
                                { required: true, message: '请输入旧密码' },
                                { min: 4, message: '密码必须大于等于4位' },
                                { max: 12, message: '密码必须小于等于12位' },
                                { pattern: /^[A-Za-z0-9_]+$/, message: '密码必须由英文字母、数字、下划线组成' },
                            ],
                        })(
                            <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="请输入旧密码"
                            />,
                        )}
                    </Form.Item>

                    <Form.Item>
                        {getFieldDecorator('newPassword', {
                            rules: [
                                { required: true, message: '请输入新密码' },
                                { min: 4, message: '密码必须大于等于4位' },
                                { max: 12, message: '密码必须小于等于12位' },
                                { pattern: /^[A-Za-z0-9_]+$/, message: '密码必须由英文字母、数字、下划线组成' },
                            ],
                        })(
                            <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="请输入新密码"
                            />,
                        )}
                    </Form.Item>

                    <Form.Item>
                        {getFieldDecorator('newPassword2', {
                            rules: [
                                { required: true, message: '请再次输入新密码' },
                                { min: 4, message: '密码必须大于等于4位' },
                                { max: 12, message: '密码必须小于等于12位' },
                                { pattern: /^[A-Za-z0-9_]+$/, message: '密码必须由英文字母、数字、下划线组成' },
                                { validator: this.checkNewPassword },
                            ],
                        })(
                            <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="请再次输入新密码"
                            />,
                        )}
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">确定</Button>
                    </Form.Item>
                </Form>
            </Card>
        )
    }
}
const WrappedRepassword = Form.create()(Repassword);
export default WrappedRepassword